<template>
  <div class="img">
    <div id="nav">
      <van-icon name="wap-nav" @click="showPopup" />
      <span>首页</span>
      <span></span>
    </div>
    <van-popup v-model="show" position="left" :style="{ height: '80%' }" round id="popup">
      <van-sidebar v-model="activeKey" id="sidebar">
        <van-sidebar-item
          :title="item.name"
          v-for="(item,index) in activeList"
          :key="index"
          @click="finprojectID(item,index)"
        />
      </van-sidebar>
    </van-popup>

    <div class="content">
      <p class="text" v-if="!form.length" @click="showPopup">暂无数据</p>

      <ul>
        <li v-for="(value,index) in form" :key="index">
          <van-checkbox v-model="value.checked" icon-size="num" id="check"></van-checkbox>
          <p>{{value.name}}</p>
          <van-button type="primary" size="mini" id="uploading" @click="uploading(value,index)">加入任务</van-button>
        </li>
      </ul>
      <!-- <div class="all">
        <van-button type="info" size="small" id="allup" @click.native="alldeup">提交多个</van-button>
      </div>-->
    </div>

    <Footer page="index"></Footer>
  </div>
</template>
<script>
import { Toast } from "vant";
import Footer from "@/components/Footer";
import { projectData, finprojectID, addexamine } from "@/API/index.js";
export default {
  components: {
    Footer
  },
  created() {
    //记录侧边栏index
    this.activeKey = this.$store.state.activeKey;
    projectData().then(res => {
      //console.log(res);
      this.activeList = res.list;
    });
  },

  data() {
    return {
      show: true, //遮罩层
      activeKey: 0, //侧边栏
      activeList: [], //侧边栏数据
      form: [], //页面列表
      testForm: [] //测试提交重复
    };
  },
  methods: {
    showPopup(i) {
      this.show = true;
    },
    //选择侧边栏然后获取数据
    finprojectID(item, index) {
      this.show = false;
      this.$store.commit("updateActiveKey", index);
      //获取页面数据
      finprojectID(item.projectId).then(res => {
        this.form = res.list.map(value => {
          return {
            classId: value.classId,
            className: value.className,
            name: value.name,
            pageId: value.pageId,
            projectId: value.projectId,
            projectName: value.projectName,
            checked: false
          };
        });
      });
    },
    //提交
    uploading(v, i) {
      //  let params = {
      //   "classId":"班级id",
      //  "className":"班级名称",
      //  "projectId":"项目id",
      //  "projectName":"项目名称",
      //  "pageId":"页面id",
      //  "pageName":"页面名称"
      //  }

      addexamine(v).then(res => {
        console.log(res);
        Toast.success("提交成功");
      });
    },
    //多个提交
    alldeup(behavior) {
      let that = this;
      //筛选选中的项目
      let arr = this.form.filter(function(value, index) {
        return value.checked == true;
      });

      //依次添加到审核中项目
      arr.forEach(value => {
        console.log(value.pageId);
        Toast.success("多个提交成功");
      });

      // 删除选中的项目
      // for (let i = this.form.length - 1; i >= 0; i--) {
      //   if (this.form[i].checked === true) {
      //     this.form.splice(i, 1);
      //   }
      // }
    }
  }
};
</script>
<style lang="less" scoped>
.img {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: url("../../assets/img5.jpg") no-repeat center/cover;
}
#nav {
  background: #ffdab9;
  padding: 15px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  z-index: 999;
}
#popup {
  margin-top: -40px;
}
#sidebar {
  width: 60vw;
}
.text {
  text-align: center;
  padding: 15px 10px 10px;
  color: rgba(0, 0, 0, 0.7);
}
.content {
  width: 100%;
  background: #fff;
  position: absolute;
  left: 0;
  top: 43px;

  ul {
    padding: 5px 10px;
    max-height: 550px;
    overflow: scroll;
    li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0;
      p {
        font-size: 14px;
        flex: 1;
        text-align: left;
        text-indent: 10px;
      }

      #uploading {
        margin-left: 5px;
      }
    }
  }
}
.all {
  display: flex;
  justify-content: center;
  align-items: center;
  // background: rgba(72, 118, 255, 0.7);
}
</style>